<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-row :gutter="10">
      <el-col :span="4">
        <el-image v-if="movies.icoPath != null"
                  fit="contain"
                  :src="movies.icoPath"></el-image>
        <el-image v-else
                  fit="contain"
                  :src="require('@/assets/images/collect/Film.png')"></el-image>
      </el-col>

      <el-col :span="20">
        <el-descriptions title="" :column="2" :size="size">
          <el-descriptions-item label="名称">{{movies.name}}</el-descriptions-item>
          <el-descriptions-item label="导演">{{movies.director}}</el-descriptions-item>
          <el-descriptions-item label="主演">{{movies.toStar}}</el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate disabled v-model="movies.grade"></el-rate>
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag :size="tagSize">{{movies.moviesTypeName}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="简介">{{movies.describe}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              观看进度
            </template>
            <el-tag :size="tagSize" :type="speedOfProgressToTag(movies.speedOfProgress)">
              {{speedOfProgressToChinese(movies.speedOfProgress)}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              上映年份
            </template>
            {{movies.publicationYear}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              观看地址
            </template>
            {{movies.locale}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              是否追更
            </template>
            <el-tag :size="tagSize" :type="continueSeeToTag(movies.continueSee)">
              {{continueSeeToChinese(movies.continueSee)}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              已看情况
            </template>
            {{movies.page}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-alarm-clock"></i>
              录入时间
            </template>
            {{getTime(movies.createTime)}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              个人点评
            </template>
            {{movies.comment}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="danger" @click="delMoviesTips(movies.id)">删除</el-button>
      <el-button plain type="warning" @click="toUpdMovies(movies)">编辑</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>
  import {checkNull, getFullTime} from "../../utils/utils";
  import http from '@/utils/http'

  export default {
    name: "MoviesDetailed",
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 影视信息
        movies: {
          id: null,
          typeId: null,
          name: null,
          director: null,
          toStar: null,
          icoPath: null,
          describe: null,
          locale: null,
          comment: null,
          continueSee: null,
          speedOfProgress: null,
          page: null,
          grade: null,
        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 跳转到影视更新页面
       */
      toUpdMovies(movies){
        this.$emit('openUpdMovies', movies)
        this.tableConfig.show = false
      },
      /**
       * 物理删除影视提示信息
       */
      delMoviesTips(id){
        this.$confirm('是否删除影视信息, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delMovies(id)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除影视
       * @param id 主键
       */
      delMovies(id){
        http.post("/movies/delMovies", {
          id: id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 刷新页面
          this.$emit('getMoviesPage', null)
          this.$message.success("删除成功");
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开影视详情
       * @param obj 影视信息
       */
      openMoviesDetailed(obj){
        this.movies = obj
        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['影视', '详情'])
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 追更转中文
       * @param item 要转换的数据
       * @return {string} 返回的转换结果
       */
      continueSeeToChinese(item) {
        if (checkNull(item)){
          return '暂无数据'
        }
        if (item === 1){
          return "停止"
        } else {
          return "继续追更"
        }
      },
      /**
       * 追更转tag
       * @param item 要转换的数据
       * @return {string} 返回的转换结果
       */
      continueSeeToTag(item) {
        if (checkNull(item)){
          return 'info'
        }
        if (item === 1){
          return "danger"
        } else {
          return "success"
        }
      },
      /**
       * 阅读进度转中文
       * @param item
       * @return {string}
       */
      speedOfProgressToChinese(item){
        if (checkNull(item)){
          return '暂无数据'
        }
        if (item === 1){
          return "计划中-准备看"
        } else if (item === 2){
          return "观影中断-不会继续追"
        } else if (item === 3){
          return "观影暂停-停止观影后续会继续"
        } else {
          return "观影完成-完整的看完了"
        }
      },
      /**
       * 阅读进度转tag
       * @param item
       * @return {string}
       */
      speedOfProgressToTag(item){
        if (checkNull(item)){
          return 'info'
        }
        if (item === 1){
          return "success"
        } else if (item === 2){
          return "danger"
        } else if (item === 3){
          return "warning"
        } else {
          return "success"
        }
      },
    }
  }
</script>

<style scoped>

</style>
